<#include "common/freemarker/include_header.ftl">



<body style="max-width:800px; margin: 0 auto 10px;">

<h3>1.默认标准的选择框</h3>
	<div class="demo-list">
	      <input tabindex="1" type="checkbox" id="input-1">
	      <label for="input-1">Checkbox多选1</label>
	    
	      <input tabindex="2" type="checkbox" id="input-2" checked>
	      <label for="input-2">Checkbox多选2</label>
	   
	      <input tabindex="3" type="radio" id="input-3" name="demo-radio">
	      <label for="input-3">Radio 单选3</label>
	   
	      <input tabindex="4" type="radio" id="input-4" name="demo-radio" checked>
	      <label for="input-4">Radio 单选4</label>
	   
	 
	</div>
	<script>
	  $(document).ready(function(){
	    $('.demo-list input').iCheck({
	      checkboxClass: 'icheckbox_minimal-grey',
	      radioClass: 'iradio_minimal-grey',
	      increaseArea: '40%'
	    });
	  });
	 </script>


<br><br>
<h3>2.演示不同风格的选择框</h3>
<#macro style name color>
	 <div class="demo-${name}${color}">
	      <input  type="checkbox" id="${name}-${color}-1" checked>
	      <label for="${name}-${color}-1">样式${name}-颜色${color}</span></label>
	      <input  type="radio" id="${name}-${color}-3" name="demo-radio" checked >
	      <label for="${name}-${color}-3">单选</span></label>
	 
	</div>
	 <script>
	  $(document).ready(function(){
	    $('.demo-${name}${color} input').iCheck({
	      checkboxClass: 'icheckbox_${name}-${color}',
	      radioClass: 'iradio_${name}-${color}',
	      increaseArea: '20%'
	    });
	  });
	 </script>
	 
 </#macro>
 <@style "minimal", "black" />
<@style "minimal", "red" />
<@style "minimal", "green" />
<@style "minimal", "blue" />
<@style "minimal", "pink" />
<@style "minimal", "aero" />
<@style "minimal", "grey" />
<@style "minimal", "orange" />
<@style "minimal", "yellow" />
<@style "minimal", "purple" />
<@style "square", "red" />
<@style "flat", "red" />


<pre class="markup">
风格： flat\futurico\line\minimal\polaris\ square\
颜色 black\red\ green\ blue\ pink  \aero \grey \orange \yellow \purple
&lt;script>
$(document).ready(function(){
  $('input').iCheck({
    checkboxClass: 'icheckbox_minimal-red',
    radioClass: 'iradio_minimal-red',
    increaseArea: '20%' <span class="comment">// optional</span>
  });
});
&lt;/script>
</pre>

<br><br>
<h3>3.黑色底框风格</h3>

    <div  class="demo-polaris" style="color:#7a828b;background:#2c323c;padding:20px">
	        <div>
	          <input tabindex="21" type="checkbox" id="polaris-checkbox-1">
	          <label for="polaris-checkbox-1">Checkbox 1</label>
	        </div>
	        <div>
	          <input tabindex="22" type="checkbox" id="polaris-checkbox-2" checked>
	          <label for="polaris-checkbox-2">Checkbox 2</label>
	        </div>
	        <div>
	          <input type="checkbox" id="polaris-checkbox-disabled" disabled>
	          <label for="polaris-checkbox-disabled">Disabled</label>
	        </div>
	        <div>
	          <input type="checkbox" id="polaris-checkbox-disabled-checked" checked disabled>
	          <label for="polaris-checkbox-disabled-checked">Disabled &amp; checked</label>
	        </div>
	      </ul>
	      <ul class="demo-polaris">
	        <div>
	          <input tabindex="23" type="radio" id="polaris-radio-1" name="polaris-radio">
	          <label for="polaris-radio-1">Radio button 1</label>
	        </div>
	        <div>
	          <input tabindex="24" type="radio" id="polaris-radio-2" name="polaris-radio" checked>
	          <label for="polaris-radio-2">Radio button 2</label>
	        </div>
	        <div>
	          <input type="radio" id="polaris-radio-disabled" disabled>
	          <label for="polaris-radio-disabled">Disabled</label>
	        </div>
	        <div>
	          <input type="radio" id="polaris-radio-disabled-checked" checked disabled>
	          <label for="polaris-radio-disabled-checked">Disabled &amp; checked</label>
	        </div>
	<div>      
	   <script>
	        $(document).ready(function(){
	          $('.demo-polaris input').iCheck({
	            checkboxClass: 'icheckbox_polaris',
	            radioClass: 'iradio_polaris',
	            increaseArea: '-10%'
	          });
	        });
	  </script>
	
	            
	<p><br><br></p>            
	            
	<div class="demo-futurico" style="color:#7a828b;background:#2c323c;">
	        <div>
		      <input tabindex="25" type="checkbox" id="futurico-checkbox-1">
		      <label for="futurico-checkbox-1">Checkbox11 1</label>
		    </div>
		    <div>
		      <input tabindex="26" type="checkbox" id="futurico-checkbox-2" checked>
		      <label for="futurico-checkbox-2">Checkbox 2</label>
		    </div>
		    <div>
		      <input type="checkbox" id="futurico-checkbox-disabled" disabled>
		      <label for="futurico-checkbox-disabled">Disabled</label>
		    </div>
		    <div>
		      <input type="checkbox" id="futurico-checkbox-disabled-checked" checked disabled>
		      <label for="futurico-checkbox-disabled-checked">Disabled &amp; checked</label>
		    </div>
		  </ul>
		  <ul class="demo-futurico">
		    <div>
		      <input tabindex="27" type="radio" id="futurico-radio-1" name="futurico-radio">
		      <label for="futurico-radio-1">Radio button 1</label>
		    </div>
		    <div>
		      <input tabindex="28" type="radio" id="futurico-radio-2" name="futurico-radio" checked>
		      <label for="futurico-radio-2">Radio button 2</label>
		    </div>
		    <div>
		      <input type="radio" id="futurico-radio-disabled" disabled>
		      <label for="futurico-radio-disabled">Disabled</label>
		    </div>
		    <div>
		      <input type="radio" id="futurico-radio-disabled-checked" checked disabled>
		      <label for="futurico-radio-disabled-checked">Disabled &amp; checked</label>
		    </div>
	</div>
	<script>
		$(document).ready(function(){
		  $('.demo-futurico input').iCheck({
		    checkboxClass: 'icheckbox_futurico',
		    radioClass: 'iradio_futurico',
		    increaseArea: '20%'
		  });
		});
	</script>
</body>            
            
            
            
            
            
            
            
            
            
            
            
            
            